<template>
  <ex-dialog width="600px" class="ex-diolog" title="编辑区域" :visible="visible" :center="true" @closeDialog="handleClose">
    <div class="cascader_box">
      <el-cascader filterable clearable :options="options" v-model="regionAvalue" :props="{ value: 'id',label: 'label',children: 'children'}" @change="handleChange"></el-cascader>
      <div class="cascader_box_b">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSuccess" :loading="buttomLoding" v-if="type == 1">保存</el-button>
        <el-button type="primary" @click="handleSuccessTwo" :loading="buttomLoding" v-if="type == 2">保存</el-button>
      </div>
    </div>
  </ex-dialog>
</template>
<script>
  // components
  import Loading from "@/components/Loading/index";
  // api
  import {
    getCity,
    updateRegionInfo,
    spuriousUpdateRegionInfo,
  } from "@/api/merchants";

  // api
  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
      id: String,
      shopId: String,
      type: String,
      fromBase: Object,
    },
    data() {
      return {
        ruleForm: {
          province: "", //省
          city: "", //市
          area: "", //区
        },
        merchantId: "", //商家id
        options: [],
        regionAvalue: [],
        buttomLoding: false,
      };
    },
    computed: {},
    created() {
      console.log(this.fromBase);
      this.getCity();
      //处理所属区域回显
      let regionAvalue = [];
      regionAvalue.push(this.fromBase.province);
      regionAvalue.push(this.fromBase.city);
      regionAvalue.push(this.fromBase.area);
      regionAvalue.join(",");
      this.regionAvalue = regionAvalue;
      this.ruleForm.province = this.fromBase.province;
      this.ruleForm.city = this.fromBase.city;
      this.ruleForm.area = this.fromBase.area;
    },
    methods: {
      handleChange(value) {
        console.log(value);
        this.ruleForm.province = value[0];
        this.ruleForm.city = value[1];
        this.ruleForm.area = value[2];
      },
      //查询城市数据
      getCity() {
        const params = {};
        getCity(params)
          .then((res) => {
            this.options = res.result;
            this.options.forEach((item) => {
              item.children.forEach((items) => {
                items.children.forEach((itemss) => {
                  if(itemss.children.length==0){
                    itemss.children = null
                  }
                })
              })
            })
            // let ls = [];
            // ls = this.getTreeData(res.result);
            // let ls1 = ls.map((item) => {
            //   item.value = item.id;
            //   item.children.map((items) => {
            //     items.value = items.id;
            //     items.children.map((itemss) => {
            //       itemss.value = itemss.id;
            //     });
            //   });
            //   return item;
            // });
            // console.log("ls1+++", ls1);
            // this.options = ls1;
          })
          .finally(() => {});
      },
      getTreeData(data) {
        // 循环遍历json数据
        for (var i = 0; i < data.length; i++) {
          if (data[i].children.length < 1) {
            // children若为空数组，则将children设为undefined
            // data[i].children=undefined;
            delete data[i].children;
          } else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].children);
          }
        }
        return data;
      },
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
        // this.$refs[formName].resetFields();
      },
      //确认
      handleSuccess() {
        this.merchantId = this.id;
        if (this.ruleForm.province == "") {
          this.$message({
            message: "请选择区域",
            type: "warning",
            duration: 1500,
          });
          return;
        }
        this.buttomLoding = true;
        var data = {
          merchantId: this.merchantId,
          ...this.ruleForm,
        };
        updateRegionInfo(data)
          .then((res) => {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              // this.buttomLoding = false;
              this.$emit("success");
            }, 500);
          })
          .finally(() => {
            this.buttomLoding = false;
          });
      },
      handleSuccessTwo() {
        //确认(未入驻)
        if (this.ruleForm.province == "") {
          this.$message({
            message: "请选择区域",
            type: "warning",
            duration: 1500,
          });
          return;
        }
        this.buttomLoding = true;
        var data = {
          ...this.ruleForm,
          shopId: this.shopId
        };
        spuriousUpdateRegionInfo(data)
          .then((res) => {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              // this.buttomLoding = false;
              this.$emit("success");
            }, 500);
          })
          .finally(() => {
            this.buttomLoding = false;
          });
      },
    },
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }

    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }

  ::v-deep .el-cascader .el-input {
    width: 290px !important;
  }

  .cascader_box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cascader_box_b {
    margin-top: 30px;
  }

</style>
